import React, { useState } from "react";
import { Button, Modal,Form,Input,Radio } from "antd";
import { DatePicker, Space } from 'antd';
import { insert } from "../../../services/coupon";

const { RangePicker } = DatePicker;
export default function Add(props) {
    const [form] = Form.useForm();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [date, setDate] = useState()

    const showModal = () => {
        setIsModalOpen(true);
    };
    
// 日期
    const qi = (_,value) => {

        setDate(value);

      
    }
       
    const handleOk = async () => {
        await insert({...form.getFieldsValue(),date:date.join('/')});
        props.show();
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
        
    };
    return (
        <div>
            <Button type="primary" onClick={showModal}>
                增加
            </Button>
            <Modal
                title="增加"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={form}
                    name="addForm"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="优惠券名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: "请输入",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="活动"
                        name="coupons"
                        rules={[
                            {
                                required: true,
                                message: "请输入",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="折扣"
                        name="func"
                        rules={[
                            {
                                required: true,
                                message: "请输入",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="日期"
                        name="date"
                        rules={[
                            {
                                required: true,
                                message: "请输入",
                            },
                        ]}
                    >
                         <RangePicker   onChange={qi}  />
                    </Form.Item>
                    <Form.Item
                        label="规则"
                        name="intro"
                        rules={[
                            {
                                required: true,
                                message: "请输入",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    

                </Form>
            </Modal>
        </div>
    );
}
